<template>
    <div id="tj">
        <p>推荐歌单</p>
        <!-- 歌单 -->
        <div class="gedan">
           <ul>
               <li v-for="(item,i) in listgedan" :key="i" @click="getlb(i,item.id)">
                   <div>
                       <img :src="item.picUrl" alt="">
                       <div class="fud"><span>&#xe680;</span>{{parseInt(item.playCount/10000)}}万</div>
                       <p>{{item.name}}</p>
                   </div>
               </li>
    
           </ul>
        </div>
        <!-- 最新歌单 -->
        <p>最新歌单</p>
        <div class="zuixingd">
           <ul>
               <li v-for="item in listzuixin" :key="item.id" @click="getyy(item.id)">
                   <div class="zuix_left">
                       <p>{{item.name}}</p>
                       <p><span>SQ</span>{{item.song.artists[0].name}}-{{item.name}}</p>
                   </div>
                   <div class="zuix_right"><span>&#xe623;</span></div>
               </li>
           </ul>
        </div>
       <!-- foolter -->
       <div class="footer">
         <div class="footer_p">
             <p><span>&#xe631;</span>网易云音乐</p>
             <p>打开APP,发现更好音乐</p>
             <p>网易云公司版权所有@1997-2020 杭州读乐科技有限公司运营</p>
         </div>
       </div>
    </div>
</template>

<script>
export default {
     
     data(){
         return {
            listgedan:[],
            listzuixin:[],
           
         }
     },
     methods:{
        //  推荐歌单
         getgd(){
            this.$axios.get("/personalized",{params:{limit:6}})
             .then(response=>{
                //    response.header("Access-Control-Allow-Origin","*")
                this.listgedan = response.data.result
                // 获取歌单列表
             })
         },
        //  最新音乐1
        getnew(){
            this.$axios.get("/personalized/newsong")
             .then(response=>{
                 this.listzuixin = response.data.result
               console.log(response)
             })
        },
        // 点击跳转
        getlb(i,id){
            this.$router.push({name:'gdxq',params:{id}})
            this.$store.commit('getid',i)
        },
        // 获取音乐页面
        getyy(ids){
           this.$router.push({name:'yinyue',params:{id:ids}})
           
        }
     },
     created(){
       this.getgd()
       this.getnew()
      
     }

}
</script>

<style scoped>
#tj>p{
    border-left:2px solid #D43C33;
    padding-left:8px;
    margin-bottom: 10px;
}
.gedan>ul::after{
    content:'';
    display:block;
    clear:both;
}
.gedan>ul>li:nth-child(2),.gedan>ul>li:nth-child(5){
    margin:0 3px;
}
.gedan>ul>li{
    position: relative;
    width:123px;
    overflow: hidden;
    float: left;
    margin-bottom: 20px;
}
.gedan>ul>li>div>img{
    width:123px;
    height:123px;
    vertical-align:middle;
}
.gedan>ul>li>div>.fud{
    position:absolute;
    right:0;
    top:0;
    padding:3px;
    color:white;
    font-size:12px;
}
.gedan>ul>li>div>.fud>span{
    font-family: "wy";
    font-size:16px;
}
.gedan>ul>li>div>p{
      padding:5px 0px 0px 8px;
    width: 100%;
    overflow: hidden;
    /* 转化为弹性盒子 */
    display: -webkit-box;
    /* 限制盒子文本的行数 */
    -webkit-line-clamp: 2;
    /*  */
    -webkit-box-orient: vertical;
    font-size:14px;
}
.zuix_right>span{
    font-family: "wy";
    font-size:25px;
    color:#AAAAAA;
}
.zuixingd>ul>li{
    padding:5px 8px;
    display:flex;
    justify-content:space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}
.zuix_left{
    padding:4px 5px;
}
.zuix_left>p:nth-child(2){
    color:#A8A8A9;
    font-size: 12px;
}
.zuix_left>p:nth-child(2) span{
   border:1PX solid #D43C33;
   font-size:4px;
   color:#D43C33;
   padding:0 2px;
   margin-right:8px;
}
.zuix_right{
    padding:10px 20px;
}
.footer{
    height:200px;
    position: relative;
    background:url("../../assets/foot.png") no-repeat center;
    background-size: cover;
}
.footer>.footer_p{
    margin:40px auto 30px;
    padding:0 50px;
    text-align: center;
}
.footer>.footer_p>p{
    margin:10px auto;
}
.footer>.footer_p>p:nth-child(1){
    font-size:35px;
    color:black;
    
}
.footer>.footer_p>p:nth-child(1)>span{
    font-family: "wy";
    font-size:35px;
}
.footer>.footer_p>p:nth-child(2){
    width:100%;
    height: 40px;
    border-radius:40px;
    border:1px solid #D43C33;
    line-height: 40px;
    color:#D43C33;
    font-size:16px;
    text-align: center;
}
.footer>.footer_p>p:nth-child(3){
    font-size:6px;
    color:#888888;
}
</style>